<template>
  <el-row :gutter="20">
    <el-col style="text-align:center;">
      <el-autocomplete class="autocompletec" :trigger-on-focus="false" :fetch-suggestions="querySearchAsync" @select="suggestSelect" v-model="search" placeholder="搜索，如： 豆腐 OR 千张">
        <template slot-scope="{ item }">
          <div class="name">
            <img width="30" height="30" :src="item.pic" alt="">
            <span class="title">{{ item.title }}</span>
            <el-badge class="mark" :value="item.score">
            </el-badge>
          </div>
          <span class="addr">发布时间: {{ item.date }}</span>
        </template>
      </el-autocomplete>

      <div class="tip">
        <p>
          为什么需要这个？(上面的搜索框)
        </p>
        <p>
          在导航栏的搜索框，本身已经可以很好的搜索菜谱名，但是它的所搜过于定制化，无法发挥lucene这个 顶级搜索库的更多功能。 因此这里提供一个搜索框给熟悉lucene的人，你可以获得更多的自定义性。
        </p>
        <p>
          你还可以指定搜索的时间段，如"豆腐 OR 千张 AND date:[2018-01-01 TO 2018-04-18]"，它会返回2018-01-01到 2018-04-18的匹配数据。
        </p>
        <p>
          甚至还可以指定fans（粉丝数）的区间,如 "豆腐 OR 千张 AND date:[2018-01-01 TO 2018-04-18] AND fans:[1000 TO 10000]"
        </p>
        <p>
          总之如果您熟悉lucene，这个搜索框将无比强大。
        </p>
      </div>

      <word-segment style="margin:20px 0px;" />

      <hello-world />

    </el-col>

    <p class="about-footer">
      Powered By
      <span class="bold">Nest.js</span>
      <span class="bold">Vue.js</span>
      <span class="bold">Elasticsearch</span>
    </p>
  </el-row>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue';
import WordSegment from '../components/word-segment/word-segment';
import { searchByDSL } from '../api/elasticApi';
import { mapActions } from 'vuex';
export default {
  data() {
    return {
      search: ''
    };
  },
  methods: {
    suggestSelect(item) {
      this.setCurrentCook(item.id);
      this.$router.push({ name: 'detail' });
    },
    querySearchAsync(queryString, cb) {
      if (!queryString || queryString.trim() === '') {
        return;
      }
      searchByDSL(queryString)
        .then(res => {
          // console.log(res);
          if (res.data.hits.hits.length > 0) {
            /** @type {array} options */
            const options = res.data.hits.hits;
            const results = options.map(option => {
              return {
                score: option['_score'],
                id: option['_id'],
                title: option['_source']['title'],
                pic: option['_source']['pic_url'],
                date: option['_source']['date']
              };
            });
            // console.log(results);
            cb(results);
          } else {
            // eslint-disable-next-line
            cb([]);
          }
        })
        .catch(() => {
          // eslint-disable-next-line
          cb([]);
        });
    },
    ...mapActions(['setCurrentCook'])
  },
  components: {
    HelloWorld,
    WordSegment
  }
};
</script>

<style lang="scss" scoped>
.about {
  text-align: center;
}
.bold {
  font-weight: bold;
  margin-left: 10px;
  color: cornflowerblue;
}

.name {
  display: flex;
  flex: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  .title {
    font-weight: bold;
  }
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}

.about-footer {
  position: fixed;
  bottom: 0;
  left: 20;
}

.tip {
  text-align: left;
  padding: 8px 16px;
  background-color: #ecf8ff;
  border-radius: 4px;
  border-left: 5px solid #50bfff;
  margin: 20px 0;
}

.autocompletec {
  width: 100%;
}
</style>
